<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>触发事件并传递参数</title>
        <style>
            .wrapper { border: 1px solid #00f ; }
            .amount { 
                display: inline-flex; 
                border: 1px solid #00f;
                margin: 5px;
                width: 150px;
                height: 50px;
                line-height: 50px;
                background-color: #00f;
            }
            .amount>a {
                flex-basis: 40px;
                color: #fff;
                font-size: 36px;
                text-align: center;
                user-select: none;
            }
            .amount>input {
                width: 70px;
                font-size: 36px;
                text-align: center;
                border: none;
                outline: none;
            }
        </style>
    </head>
    <div>

        <h3>触发事件并传递参数</h3>

        <div id="application" v-cloak></div>

        <script src="vue@3.2.45.js" type="text/javascript"></script>

        <script>

            const AmountComponent = {
                emits: [ '减少', '增加' ],
                template: `<span class="amount">
                              <a @click="down">-</a>
                              <input v-model="count">
                              <a @click="up">+</a>
                           </span>`,
                data() {
                    return {
                        count: 5
                    }
                },
                methods: {
                    down() {
                        this.count--;
                        this.$emit('减少', 1);
                    },
                    up() {
                        this.count++;
                        this.$emit('增加', 1);
                    }
                },
                mounted() {
                    // 触发事件并传递参数
                    this.$emit('增加', this.count );
                },
                watch: {
                    count(newValue, oldValue) {
                        if( newValue > oldValue ) {
                            this.$emit('增加', newValue - oldValue );
                            return;
                        } 
                        if( newValue < oldValue ) {
                            this.$emit('减少', oldValue - newValue );
                        }
                    }
                }
            }

            const App = {
                components: {
                    AmountComponent
                },
                data() {
                    return {
                        total: 0
                    }
                },
                template: `<div class="wrapper">
                              <!--监听子组件上的事件-->
                              <AmountComponent @增加="increase" @减少="decrease"></AmountComponent>
                              <AmountComponent @增加="increase" @减少="decrease"></AmountComponent>
                              <AmountComponent @增加="increase" @减少="decrease"></AmountComponent>
                              <hr>
                              <b v-text="total"></b>
                           </div>`,
                methods: {
                    increase( increment ) {
                        console.log( 'root component: increase ', increment );
                        this.total += increment;
                    },
                    decrease( increment ) {
                        console.log( 'root component: decrease ', increment );
                        this.total -= increment;
                    }
                }
            }
            
            const app = Vue.createApp(App);
            app.mount('#application');
        </script>
    </div>
</html>